<template>
  <div>
    <el-table :height="300"
      :data="
        tableData.filter(
          data =>
            !search || data.name.toLowerCase().includes(search.toLowerCase())
        )
      "
      style="width: 100%"
    >
      <el-table-column label="编号" width="180">
        <template slot-scope="scope">
          <!-- <i class="el-icon-time"></i> -->
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="180">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.name }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.name }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="生日" prop="bir"></el-table-column>
      <el-table-column label="性别" prop="sex"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>

      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
        </template>
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)" 
            >编辑</el-button
          >
          <el-popconfirm
            confirm-button-text='好的'
            cancel-button-text='不用了'
            icon="el-icon-info"
            icon-color="red"
            title="这是一段内容确定删除吗？"
            @confirm="handleDelete(scope.$index, scope.row)"
            >
            <el-button size="mini" 
                        type="danger"
                        slot="reference">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页工具 -->
<div class="block">
    <!-- 用栅格布局 -->
  <el-col :span="12" :offset="12">
    <el-pagination
    style="margin: 15px 0px"
    background
    prev-text="上一页"
    next-text="下一页"
    layout="prev, pager, next, jumper, total, sizes"
    :page-size="size"
    :current-page="pageNow"
    :page-sizes="[2,4,6,8,10]"
    :total="total"
    @current-change="findPage"
    @size-change="findSize"
    >
  </el-pagination>
  </el-col>
    <!-- 用栅格布局 -->
</div>

     <el-button type="success" style="margin: 10px" @click="show2 = !show2">添加</el-button>
     
<!-- 添加页面 -->
    <div style="display: flex; margin-top: 20px; height: 800px;">
      <transition name="el-zoom-in-center">
        <div v-show="show2" class="transition-box">
          <!-- 表单 -->
          <!-- hide-required-asterisk="false" -->
          <el-form ref="userForm"  :rules="rules" :model="form" label-suffix=":" label-width="80px">
            <el-form-item label="姓名" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="生日" prop="bir">
              <el-col :span="11">
                <el-date-picker
                 value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择日期"
                  v-model="form.bir"
                  style="width: 100%;"
                ></el-date-picker>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
            </el-form-item>
            <el-form-item label="性别">
              <el-radio-group v-model="form.sex">
                <el-radio label="男"></el-radio>
                <el-radio label="女"></el-radio>
              </el-radio-group>
            </el-form-item>
        <!-- prop指明校验 -->
            <el-form-item label="地址" prop="address">
              <el-input type="textarea" v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('userForm')">保存信息</el-button>
              <el-button @click="saveUserInfo">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </transition>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "List",
  data() {
    return {
      tableData: [],
      search: "",
      show2: false,
      form: {
        name: "",
        bir: "",
        sex: "女",
        address: ""
      },
      total:0,
      size:4,
      pageNow:1,
      //表单校验
      rules: {
          name: [ { required: true, message: '请输入用户姓名', trigger: 'blur' }],
           bir: [ { required: true, message: '请输入用户生日', trigger: 'blur' }],
            address: [ { required: true, message: '请输入用户住址', trigger: 'blur' }],
          
        }
    };
  },
  methods: {
    // 原来处理每页显示记录发送变化的方法
    findSize(size){
      console.log(size);
      this.size=size;
      this.findAllTableData(this.page,size);
    },
    // 处理分页
    findPage(page){
      console.log(page);
      this.page=page;
      this.findAllTableData(page,this.size);
    },
    saveUserInfo(){
        this.form={
          sex: '女',//默认值
        }
    },
    handleEdit(index, row) {
      console.log(index, row);
      //回显
      this.show=true;
      this.form=row;//回显编辑的信息
    },
    handleDelete(index, row) {
      console.log(index, row);
        axios.get("http://localhost:1234/user/delete?id="+row.id).then(res => {
             console.log(index,row);
            if(res.data.status){
             this.$message({
               message: res.data.msg,
               type: 'success'
             })
            //  清空表单信息
            this.form={}
            // 隐藏表单
            this.show2=false;
            // 刷新数据
            this.findAllTableData();
        }else{
          this.$message.error(res.data.msg);
        }
    });
    },
    findAllTableData(page,size){
     page=page?page:this.pageNow;
     size=size?size:this.size;
        axios.get("http://localhost:1234/user/findByPage?pageNow="+page+"&pageSize="+size).then(res => {
      console.log(res.data);
        this.tableData = res.data.users;
        this.total = res.data.total;
    });
    },
    onSubmit(userForm) {

       this.$refs[userForm].validate((valid) => {
          if (valid) {
            // alert('submit!');
            axios.post("http://localhost:1234/user/add",this.form).then(res => {
        console.log(res.data);
        if(res.data.status){
             this.$message({
               message: "恭喜你"+res.data.msg,
               type: 'success'
             })
            //  清空表单信息
            this.form={}
            // 隐藏表单
            // this.show2=false;
            // 刷新数据
            this.findAllTableData();
        }else{
          this.$message.error(res.data.msg);
        }
      });
          } else {
           alert('输入数据不合法');
            return false;
          }
        });

      
    }
  },
  created() {
    this.findAllTableData();
  }
};
</script>
<style scoped>
.transition-box {
  margin-bottom: 10px;
  width: 100%;
  /* height: 1000px; */
  border-radius: 4px;
  /* background-color: #409eff; */
  /* text-align: center; */
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin-right: 20px;
}
</style>
